I am using Uppy Dashboard and whenever the state changes uppy reset its state and the uploaded images are not shown. How can I add/show images in my uppy? How prefill/preload images in uppy.io library?
Any help will be appreciated. Thanks Below is my code:
const equipment_uppy = new Uppy({
id: 'equipment_uppy',
restrictions: { allowedFileTypes: ['image/*', 'video/*'] },
autoProceed: false
})
equipment_uppy.on('file-added', (file) => {
equipment_uppy.setFileMeta(file.id, {
type: file.source,
avintakeid : data.id
})
})
equipment_uppy.use(XHRUpload, {
endpoint: `${process.env.REACT_APP_SITE_URL}/api/auth/uploadavintakeimages`,
formData: true,
fieldName: 'files[]',
headers: {
Authorization: `Bearer ${localStorage.getItem('accessToken')}`
}})
equipment_uppy.use(Webcam)
<Dashboard
uppy={equipment_uppy}
id='equipment_location_image'
width='100%'
height='300px'
plugins={['Webcam']}
/>
Make sure you have latest version of the Uppy core & Uppy react NPM https://www.npmjs.com/package/uppy. After that pls initialize in this way
import Uppy from '@uppy/core'
import XHRUpload from '@uppy/xhr-upload'
import Webcam from '@uppy/webcam'
import { DragDrop, Dashboard, useUppy } from '@uppy/react'
const equipment_uppy = useUppy(() => {
return new Uppy({
id: 'equipment_uppy',
restrictions: { allowedFileTypes: ['image/*', 'video/*'] },
autoProceed: false
})
.use(XHRUpload, {
endpoint: `${process.env.REACT_APP_SITE_URL}/api/auth/uploadapi`,
formData: true,
fieldName: 'files[]',
headers: {
Authorization: `Bearer ${localStorage.getItem('accessToken')}`
}})
})
equipment_uppy.on('file-added', (file) => {
equipment_uppy.setFileMeta(file.id, {
type: file.source,
avintakeid : data.id
})
})
equipment_uppy.on('file-removed', (file) => {
console.log(file)
})
equipment_uppy.on('complete', function(result) {
console.log(result)
})
<Dashboard
uppy={equipment_uppy}
id='equipment_location_image'
width='100%'
height='180px'
>
</Dashboard>
I hope this works Thanks